// src/pages/TagEdit.jsx
import React, { useEffect, useState } from 'react';
import {Form, Input, Button, message, Select} from 'antd';
import { useNavigate, useParams } from 'react-router-dom';
import { getTagInfo, tagEdit } from '../service/tag';

export default function TagEdit() {
    const [form] = Form.useForm();
    const navigate = useNavigate();
    const { id } = useParams(); // 获取 URL 中的 id 参数
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        if (id) {
            fetchTagData(id);
        }
    }, [id]);

    const fetchTagData = async (tagId) => {
        try {
            const res = await getTagInfo(tagId); // 获取单个标签数据的接口
            if (res.success) {
                form.setFieldsValue(res.data); // 回显数据到表单
            } else {
                message.error('获取标签信息失败');
            }
        } catch (error) {
            console.error('获取标签信息出错:', error);
            message.error('获取标签信息异常');
        }
    };

    const onFinish = async (values) => {
        setLoading(true);
        try {
            const res = await tagEdit({ ...values, id }); // 调用编辑接口
            if (res.success) {
                message.success('标签更新成功');
                navigate('/admin/tag/list'); // 编辑成功后跳转回列表页
            } else {
                message.error('标签更新失败');
            }
        } catch (error) {
            console.error('更新标签出错:', error);
            message.error('更新标签异常');
        } finally {
            setLoading(false);
        }
    };

    return (
        <div>
            <h1 style={{ marginBottom: '24px' }}>编辑标签</h1>
            <Form form={form} onFinish={onFinish} layout="vertical">
                <Form.Item
                    label="标签名称"
                    name="tagName"
                    rules={[{ required: true, message: '请输入标签名称' }]}
                >
                    <Input placeholder="请输入标签名称" />
                </Form.Item>

                <Form.Item
                    label="标签分组"
                    name="tagType"
                    rules={[{ required: true, message: '请选择标签分组' }]}
                >
                    <Select placeholder="请选择标签分组">
                        <Select.Option value={0}>内容标签</Select.Option>
                        <Select.Option value={1}>用户标签</Select.Option>
                    </Select>
                </Form.Item>

                <Form.Item
                    label="内容描述"
                    name="tagDesc"
                >
                    <Input.TextArea placeholder="请输入标签内容描述" />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" loading={loading}>
                        保存
                    </Button>
                    <Button
                        style={{ marginLeft: 8 }}
                        onClick={() => navigate('/admin/tag/list')}
                    >
                        取消
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}
